<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食品安全数据可视化大屏</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 顶部标题区 -->
    <header class="header">
        <div class="header-content">
            <h1 class="title">食品安全数据可视化大屏</h1>
            <div class="header-info">
                <span class="time" id="current-time"></span>
                <span class="date" id="current-date"></span>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
        <!-- 统计卡片区 -->
        <section class="stats-section">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon">🍽️</div>
                    <div class="stat-content">
                        <h3 class="stat-title">总食品数量</h3>
                        <p class="stat-value" id="total-foods">0</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">📊</div>
                    <div class="stat-content">
                        <h3 class="stat-title">食品类别总数</h3>
                        <p class="stat-value" id="total-categories">0</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">✅</div>
                    <div class="stat-content">
                        <h3 class="stat-title">合格食品数量</h3>
                        <p class="stat-value" id="qualified-foods">0</p>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon">⚠️</div>
                    <div class="stat-content">
                        <h3 class="stat-title">不合格食品数量</h3>
                        <p class="stat-value" id="unqualified-foods">0</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 图表区域 -->
        <section class="charts-section">
            <div class="charts-grid">
                <!-- 食品安全趋势图 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>食品安全趋势分析</h3>
                        <div class="chart-controls">
                            <button class="btn-filter" onclick="refreshSafetyTrend()">刷新</button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <div id="safety-trend-chart" class="chart"></div>
                    </div>
                </div>

                <!-- 食品类别分析 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>食品类别分析</h3>
                        <div class="chart-controls">
                            <button class="btn-filter" onclick="refreshCategoryChart()">刷新</button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <div id="category-chart" class="chart"></div>
                    </div>
                </div>

                <!-- 地区食品安全分布 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>地区食品安全分布</h3>
                        <div class="chart-controls">
                            <button class="btn-filter" onclick="refreshRegionChart()">刷新</button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <div id="region-chart" class="chart"></div>
                    </div>
                </div>

                <!-- 热门食品排行 -->
                <div class="chart-container">
                    <div class="chart-header">
                        <h3>热门食品排行</h3>
                        <div class="chart-controls">
                            <button class="btn-filter" onclick="refreshTopFoods()">刷新</button>
                        </div>
                    </div>
                    <div class="chart-content">
                        <div id="top-foods-chart" class="chart"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 信息展示区 -->
        <section class="info-section">
            <div class="info-grid">
                <div class="info-card">
                    <h3>系统信息</h3>
                    <div class="info-content">
                        <p><strong>系统名称:</strong> 食品安全数据可视化大屏</p>
                        <p><strong>技术栈:</strong> Python Flask + ECharts + MySQL</p>
                        <p><strong>更新时间:</strong> <span id="last-update">--</span></p>
                        <p><strong>数据状态:</strong> <span id="data-status">正常</span></p>
                    </div>
                </div>
                <div class="info-card">
                    <h3>操作说明</h3>
                    <div class="info-content">
                        <p>• 点击图表右上角按钮可刷新数据</p>
                        <p>• 鼠标悬停图表可查看详细数据</p>
                        <p>• 支持图表缩放和拖拽操作</p>
                        <p>• 数据每5分钟自动更新一次</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 加载动画 -->
    <div id="loading" class="loading">
        <div class="loading-spinner"></div>
        <p>数据加载中...</p>
    </div>

    <!-- JavaScript -->
    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeDashboard();
            updateDateTime();
            setInterval(updateDateTime, 1000);
        });

        function initializeDashboard() {
            // 初始化统计卡区
            document.getElementById('total-foods').innerText = '1000'; // 示例数据
            document.getElementById('total-categories').innerText = '50'; // 示例数据
            document.getElementById('qualified-foods').innerText = '900'; // 示例数据
            document.getElementById('unqualified-foods').innerText = '100'; // 示例数据

            // 初始化图表
            refreshSafetyTrend();
            refreshCategoryChart();
            refreshRegionChart();
            refreshTopFoods();
        }

        function updateDateTime() {
            const now = new Date();
            document.getElementById('current-time').innerText = now.toLocaleTimeString();
            document.getElementById('current-date').innerText = now.toDateString();
        }

        function refreshSafetyTrend() {
            // 模拟刷新食品安全趋势图
            console.log('刷新食品安全趋势图');
        }

        function refreshCategoryChart() {
            // 模拟刷新食品类别分析图
            console.log('刷新食品类别分析图');
        }

        function refreshRegionChart() {
            // 模拟刷新地区食品安全分布图
            console.log('刷新地区食品安全分布图');
        }

        function refreshTopFoods() {
            // 模拟刷新热门食品排行图
            console.log('刷新热门食品排行图');
        }
    </script>
</body>
</html>
